<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <link rel="icon" href="data:,">
  <title>stomp</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
  <!--<script src="https://cdn.bootcdn.net/ajax/libs/sockjs-client/1.6.1/sockjs.min.js"></script>-->
</head>
<body>
<button onclick="connect()">connect</button>
<button onclick="disconnect()">disconnect</button>
https://stomp.github.io https://jmesnil.net/stomp-websocket/doc
<p></p>
<form onsubmit="return false" style="display: flex">
  <textarea name="message" style="height: 300px; width: 300px">hello</textarea>
  <div style="display: flex; flex-direction: column">
    <input type="button" value="/app/broadcast" onclick="app_broadcast(this.form.message.value)">
    <input type="button" value="/topic/broadcast" onclick="topic_broadcast(this.form.message.value)">
    <input type="button" value="/queue/broadcast" onclick="queue_broadcast(this.form.message.value)">
    <input type="button" value="/app/user" onclick="app_user(this.form.message.value)">
  </div>

  <textarea id="responseText" style="height: 300px; width: 300px" readonly></textarea>
  <input type="button" value="empty" onclick="document.getElementById('responseText').value=''">
</form>

<script>
  let stomp, rt = document.getElementById("responseText");

  function connect() {
    // stomp = Stomp.over(new SockJS("/stomp"));
    stomp = Stomp.client('ws://127.0.0.1:8080/stomp');
    stomp.connect({}, function (event) { // 连接
      console.info(event);
      // 订阅
      stomp.subscribe("/topic/broadcast", event => rt.value += "/topic/broadcast:\n" + event.body + "\n");
      stomp.subscribe("/queue/broadcast", event => rt.value += "/queue/broadcast:\n" + event.body + "\n");
      stomp.subscribe("/user/queue/my", event => rt.value += "/user/queue/my:\n" + event.body + "\n");
      stomp.subscribe("/app/subscribe/1", event => rt.value += "/app/subscribe/1:\n" + event.body + "\n");
    });
  }

  disconnect = () => stomp.disconnect();

  app_broadcast = message => stomp.send("/app/broadcast", {}, message);
  topic_broadcast = message => stomp.send("/topic/broadcast", {}, message);
  queue_broadcast = message => stomp.send("/queue/broadcast", {}, message);
  app_user = message => stomp.send("/app/user", {}, message);
</script>
</body>
</html>